<template>
  <view class="chk-group-wrapper">
    <u-checkbox-group v-if="styleType==0" @change="checkboxGroupChange">
      <u-checkbox v-model="item.checked" v-for="(item, index) in dataList" :key="index" :name="item[valueName]">
        {{ item[labelName] }}
      </u-checkbox>
    </u-checkbox-group>

    <u-checkbox-group v-if="styleType==1" @change="checkboxGroupChange">
      <view class="checkbox-style-one">
        <u-checkbox 
          v-for="(item, index) in dataList" 
          :key="index" 
          v-model="item.checked" 
          :name="item[valueName]"
          :disabled="item.disabled"
          class="relative"
          :class="[value.includes(item[valueName])?'active-checkbox':'inactive-checkbox',item.disabled?'disabled-checkbox':'']"
        >
          <text>{{ item[labelName] }}</text>
          <u-icon :name="getSelectIcon(item.checked)" size="30" class="absolute bottom-0 right-0"></u-icon>
        </u-checkbox>
      </view>
    </u-checkbox-group>
  </view>
</template>

<script>
export default {
  name: "yer-checkbox",
  props: {
    list: {
      type: Array,
      default: () => [],
    }, //字典的数组集合
    defaultValue: "", //默认显示的字典，传字典的代码项
    defaultValueExtra: "", //默认显示的字典，传字典的代码项
    labelName: {
      type: String,
      default: "label",
    },
    valueName: {
      type: String,
      default: "value",
    },
    styleType: {
      type: [Number, String],
      default: 0
    }
  },
  // #ifdef VUE3
  emits: ["update:label","update:modelValue"],
  // #endif
  data() {
    return {
      dataList: [],
      value: "", //字典展示的值，对应的是字典名称
      defaultVal: [0], //默认值（是字典数组的下标）
    };
  },
  methods: {
    getSelectIcon(status){
      return status?'/static/form/icon_selected.png':'/static/form/icon_unselect.png'
    },
    clear() {
      this.showValue = "";
      this.value = "";
    },
    checkboxGroupChange(e) {
      const arr = [];
      const labelStr = []
      let _this = this;
      this.$nextTick(() => {
        _this.dataList.forEach((item) => {
          if (item.checked == true) {
            arr.push(item[_this.valueName]);
            labelStr.push(item[_this.labelName]);
          }
        });
        let _valueStr = _this.translateArr(arr)
        let _labelStr = _this.translateArr(labelStr)
        _this.value = _valueStr
        // #ifdef VUE3
        _this.$emit("update:modelValue", _valueStr);
        _this.$emit("update:label", _labelStr);
        // #endif
        // #ifndef VUE3
        _this.$emit("input", _valueStr);
        // #endif
        
      });
    },
    translateArr(arr) {
      let str = "";
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          str += arr[i] + ",";
        }
      }
      if (str.length > 0) {
        str = str.substring(0, str.length - 1);
      }

      return str;
    },
  },
  
  watch: {
    // value: function (newVal, oldVal) {
    //   this.$emit("update:modelValue", newVal);
    //   this.$emit("input", newVal);
    // },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.dataList.forEach((item, index) => {
            // 存在即选定
          if (newVal.indexOf(item[this.valueName]) > -1) {
            this.$set(this.dataList[index], "checked", true);
            // item.checked = true
          }
        });
      }
    },
    list: {
      immediate: true,
      handler: function (newVal, oldVal) {
        let val = this.defaultValue;
        if(newVal){
          // 深度拷贝去除响应式
          this.dataList = uni.$u.deepClone(newVal)
          this.dataList.forEach((item) => {
              // 存在即选定
            if (!this.defaultValue) return;
            if (this.defaultValue.indexOf(item[this.valueName]) > -1) {
              item.checked = true;
            }
          });
        }
        
      },
    }
  },
};
</script>

<style lang="scss" scoped>
.chk-group-wrapper{
  flex:1;
}
.u-checkbox-group{
  width: 100%;
}
.checkbox-style-one{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  .u-checkbox{
    padding: 8rpx 0;
    justify-content: center;
    border-radius: 6rpx;
  }
  ::v-deep .u-checkbox__label{
    margin: 0 30rpx;
  }
  ::v-deep .u-checkbox__icon-wrap{
    display: none;
  }
  ::v-deep .u-checkbox__icon-wrap--checked + .u-checkbox__label{
    color:#164cc7;
  }
  ::v-deep .u-checkbox__icon-wrap--disabled + .u-checkbox__label{
    color:#8f8f8f;
  }
  ::v-deep .active-checkbox{
    border: 1rpx solid #164cc7;
    background:#f3f7ff;
  }
  ::v-deep .inactive-checkbox{
    border: 1rpx solid #d8d8d8;
    background:#fff;
  }
  ::v-deep .disabled-checkbox{
    background:#e8e8e8;
  }
}
</style>
